import { Button, Col, Form, Input, Row, Select, theme, Divider, Radio, Table, Space, Tag, Checkbox, Pagination,DatePicker,Collapse,Modal  } from 'antd';
import "./index.scss";
import http from '../../../utils/fetchHttp'
import { useEffect, useState,Component } from 'react';
import { values } from 'mobx';


const { Panel } = Collapse;

// 第一个表格

const TableDetail = (props) => {
  const {data,getUserPurchasingPower}=props
  const [form2] = Form.useForm();
  const [user_name,setUser_name]=useState('')
  const [allMoney,setAllMoney]=useState('')
  const [allNum,setAllNum]=useState('')
  const [averagePrice,setAveragePrice]=useState('')
  const [user_email,setUser_email]=useState('')
  const [nearTime,setNearTime]=useState('')

 //模态框
 const [lookOpen, setlookOpen] = useState(false);
 const [confirmLoading, setConfirmLoading] = useState(false);
 //表单默认值
 form2.setFieldsValue({
     user_email,
     user_name,
     allMoney,
     allNum,
     averagePrice,
     nearTime
})
 // 查看
 const handleCancel = () => {
  console.log('Clicked cancel button');
  setlookOpen(false);
};
  const showRow=(record)=>{
    console.log('查看',record);
    setUser_name(record.user_name)
    setAllMoney(record.allMoney)
    setAllNum(record.allNum)
    setAveragePrice(record.averagePrice)
    setUser_email(record.user_email)
    setNearTime(record.nearTime)
    setlookOpen(true);
}
 
  
  const columns = [
    {
      title: "用户昵称",
      dataIndex: "user_name",
      key: "user_name",
    },
    {
      title: "用户账号",
      dataIndex: "user_email",
      key: "user_email",
    },
    {
      title: "消费金额",
      dataIndex: "allMoney",
      key: "allMoney",
    },
    {
      title: "消费次数",
      dataIndex: "allNum",
      key: "allNum",
    },
    {
      title: "订单均价",
      dataIndex: "averagePrice",
      key: "averagePrice",
    },
    {
      title: "最近购买时间",
      dataIndex: "nearTime",
      key: "nearTime",
    },
    {
      title: "操作",
        key: "action",
        render: (_, record) => (
          <Space size="middle">
            <a
              onClick={() => {
                showRow(record);
              }}
            >
              查看
            </a>
          </Space>
        ),
    }
  ];
//    
  // 选择的数组
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === "Disabled User",
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  return (
    <div>
      <Table
      rowKey={(record) => record.user_id}
      rowSelection={{
        type: "checkbox",
        ...rowSelection,
      }}
      pagination={false}
      columns={columns}
      dataSource={data}
    />
    <Modal  forceRender 
                title="更改用户"
                open={lookOpen}
                confirmLoading={confirmLoading}
                footer={[
                      <Button key='cancel' htmlType="button" onClick={handleCancel} style={{ marginLeft: "10px" }}>
                        取消
                      </Button>
                  ]}
            >
                <Form
                    form={form2}
                    labelCol={{
                    span: 4,
                    }}
                    wrapperCol={{
                    span: 14,
                    }}
                    layout="horizontal"
                    style={{
                    maxWidth: 600,
                    }}
                    disabled={true}
                >
                    
                    <Form.Item label="用户名称" name='user_name' initialValue={user_name}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="用户账号" name='user_email' initialValue={user_email}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="消费金额" name='allMoney' initialValue={allMoney}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="消费次数" name='allNum' initialValue={allNum}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="订单均价" name='averagePrice' initialValue={averagePrice}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="最近购买时间" name='nearTime' initialValue={nearTime}>
                    <Input style={{marginleft:"10px"}} />
                    </Form.Item>
                </Form>
            </Modal>   
    </div>
  );
};


const userPurchasingPower= ()=> {
  const [data,setData]=useState([])
  const [data1,setData1]=useState([])


  useEffect(()=>{
    getUserPurchasingPower()
  },[])
  const getUserPurchasingPower=()=>{
    http({
      url:'/user/getUserPurchasingPower',
      method: 'get',
  }).then((res=>{
      console.log(res);
      if(res.code==200){
        setData(res.data.map((item) => {
            return {
                user_name: item.user_name,
                user_email: item.user_email,
                allMoney: item.data[0].消费总金额,
                allNum: item.data[0].消费次数,
                averagePrice: item.data[0].订单均价,
                nearTime:item.data[0].最近购买日期
            }
        }))
        setData1(res.data.map((item) => {
          return {
              user_name: item.user_name,
              user_email: item.user_email,
              allMoney: item.data[0].消费总金额,
              allNum: item.data[0].消费次数,
              averagePrice: item.data[0].订单均价,
              nearTime:item.data[0].最近购买日期
          }
      }))
      }
  
  }))
  }
    const onChange = (key) => {
        console.log(key);
      };

      
      const fun=(start)=>{
        console.log(start);
        console.log("data",data);
        console.log("data1",data1);
        const newData=[]
        for(let i=0;i<data1.length;i++){
          if(data1[i].allNum>=start){
            newData.push(data1[i])
          }
        }
        console.log(newData);
        console.log(data1);
        setData(newData)
      }


      const fun1=(start,end)=>{
        const newData=[]
        if(end==null){
          for(let i=0;i<data1.length;i++){
            if(data1[i].allMoney>=start){
              newData.push(data1[i])
            }
          }
        setData(newData)
        }else{
          for(let i=0;i<data1.length;i++){
              if(data1[i].allMoney>=start&&data1[i].allMoney<end){
                newData.push(data1[i])
              }
            }
        setData(newData)
        }
      }

      const fun2=(start,end)=>{
        const newData=[]
        if(end==null){
          for(let i=0;i<data1.length;i++){
            if(data1[i].averagePrice>=start){
              newData.push(data1[i])
            }
          }
        setData(newData)
        }else{
          for(let i=0;i<data1.length;i++){
              if(data1[i].averagePrice>=start&&data1[i].averagePrice<end){
                newData.push(data1[i])
              }
            }
        setData(newData)
        }
      }
      return (
        <div>
           <div>
              <Collapse defaultActiveKey={['1']} onChange={onChange} expandIconPosition="end">
              <Panel header="筛选查询" key="1">
                <div className='condition'>消费次数：
                    <a onClick={()=>fun(1)}>1次以上</a>
                    <a onClick={()=>fun(2)}>2次以上</a>
                    <a onClick={()=>fun(3)}>3次以上</a>
                    <a onClick={()=>fun(4)}>4次以上</a>
                    <a onClick={()=>fun(5)}>5次以上</a>
                    <a onClick={()=>fun(6)}>6次以上</a>
                </div>
                <div className='condition'>消费金额：
                    <a onClick={()=>fun1(0,50) }>0-50</a>
                    <a onClick={()=>fun1(51,100)}>50-100</a>
                    <a onClick={()=>fun1(101,200)}>101-200</a>
                    <a onClick={()=>fun1(201,500)}>201-500</a>
                    <a onClick={()=>fun1(501,1000)}>501-1000</a>
                    <a onClick={()=>fun1(1000)}>1000以上</a>
                </div>
                <div className='condition'>订单均价：
                <a onClick={()=>fun1(0,50) }>0-50</a>
                    <a onClick={()=>fun2(51,100)}>50-100</a>
                    <a onClick={()=>fun2(101,200)}>101-200</a>
                    <a onClick={()=>fun2(201,500)}>201-500</a>
                    <a onClick={()=>fun2(501,1000)}>501-1000</a>
                    <a onClick={()=>fun2(1000)}>1000以上</a>
                </div>
                <Button
                        style={{
                            margin: '0 .8rem',
                        }}
                        onClick={() => {
                          getUserPurchasingPower()
                        }}
                    >
                        重置
                    </Button>
              </Panel>
            </Collapse>
           </div>
          
           <div style={{ lineHeight: "20rem" }}>
              <TableDetail getUserPurchasingPower={getUserPurchasingPower} data={data}/>
           </div>
        </div>
      );
}

export default userPurchasingPower;